<template>
	<div id="FlowProgress">
		<x-header :left-options="{showBack: false}" title="物流信息" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title-bar">
			<img v-if="goodsOrder.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
			<img v-else :src="'/los/uploads/thumb/goods/' + goodsOrder.goods_id  + '_152X152.jpeg'" alt="" />
			<div class="desc">
				<h2>{{goodsOrder.goods_name}}</h2>
				<b>￥{{goodsOrder.pay_money}}</b>
				<p>{{goodsOrder.shop_name}}</p>
			</div>
			<div class="contact">
				<a href="tel:0371-63633399"><i class="icon-tel"></i><span>联系客服</span></a>
			</div>
		</div>
		<div class="progress">
			<flow>
				<flow-state :title="text1" :is-done="isDone1"></flow-state>
				<flow-line :is-done="isDone2"></flow-line>
				<flow-state :title="text2" :is-done="isDone2">
				</flow-state>
				<flow-line :is-done="isDone3"></flow-line>
				<flow-state :title="text3" :is-done="isDone3"></flow-state>
				<flow-line :is-done="isDone4"></flow-line>
				<flow-state :title="text4" :is-done="isDone4"></flow-state>
			</flow>
		</div>
		<div class="logistics">
			<div class="top" v-for="item in company" v-if="item.English == deliveryInfo.com">
				<img :src="item.images" alt="" />
				<p>{{item.Chinese}}:{{deliveryInfo.nu}}</p>
			</div>
			<div class="track-rcol">
				<div class="track-list">
					<ul>
						<li>
							<img src="../assets/images/home/icon_refund.png" alt="" />
							<p>收件地址:{{goodsOrder.receiver_province}}{{goodsOrder.receiver_province}}{{goodsOrder.receiver_city}}{{goodsOrder.receiver_county}}{{goodsOrder.receiver_address}}</p>
							<span></span>
						</li>
						<li v-if="deliveryInfo == ''">
							<p>快递公司参数异常：请稍后查询</p>
						</li>
						<li v-for="item in deliveryInfo.data" v-else>
							<img src="../assets/images/home/icon_refund.png" alt="" />
							<p>{{item.context}}</p>
							<span>{{item.time | dateFormat}}</span>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { XHeader, Flow, FlowState, FlowLine, dateFormat } from 'vux';
	const company = [{
			Chinese: '圆通',
			English: 'yuantong',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534166582915&di=cde6429c2131ce44463175bddc0140cc&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161107%2F73cbe80c08f545d999bb5b09c70919d2_th.jpg'
		},
		{
			Chinese: '中通',
			English: 'zhongtong',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534166567224&di=0b2255260a2331146d2d8f1aa101977b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D4263438734%2C1488477125%26fm%3D214%26gp%3D0.jpg'
		},
		{
			Chinese: '申通',
			English: 'shentong',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534166533550&di=629736f9954c3d1c318720c4a2876cf1&imgtype=0&src=http%3A%2F%2Fpic41.photophoto.cn%2F20161006%2F0017029502870509_b.jpg'
		},
		{
			Chinese: '邮政',
			English: 'ems',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534167233968&di=cc3beea62b3e3ac6f1e0e49e915b6f59&imgtype=0&src=http%3A%2F%2F2.pic.paopaoche.net%2Fup%2F2016-1%2F201615141244.png'
		},

		{
			Chinese: '韵达',
			English: 'yunda',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534166505502&di=d21a815d15b4b602d36e204707270885&imgtype=0&src=http%3A%2F%2Fbjw-a.oss-cn-shanghai.aliyuncs.com%2Fp1%2Fbig%2Fn_v1bl2lwtmbsksvrpl3erta.jpg'
		},
		{
			Chinese: '汇通快递',
			English: 'huitongkuaidi',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534166452909&di=548f48370c0623b51aa3672f5dea11c6&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F18%2F49%2F21%2F5628fb0c7f25d_1024.jpg'
		},
		{
			Chinese: '全峰',
			English: 'quanfeng',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534762321&di=187410b787d5b4893e5ac7795846d863&imgtype=jpg&er=1&src=http%3A%2F%2Fimg1.gtimg.com%2Fxian%2Fpics%2Fhv1%2F175%2F240%2F2179%2F141750850.jpg'
		},
		{
			Chinese: '优速',
			English: 'yousu',
			images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534167427751&di=2f9e201923628248d316fd080a9797c7&imgtype=0&src=http%3A%2F%2Fbjw-a.oss-cn-shanghai.aliyuncs.com%2Fp1%2Fbig%2Fn_v1bl2lwkohgbqvpzauom3q.jpg'
		}
	];

	export default {
		filters: {
			dateFormat
		},
		data() {
			return {
				company: company,
				text1: '已发货',
				text2: '运输中',
				text3: '派件中',
				text4: '已签收',
				text5: '派件中',
				deliveryInfo: '',
				express_number: '',
				auctionOrder: '',
				goodsOrder: '',
				isDone1: false,
				isDone2: false,
				isDone3: false,
				isDone4: false,
			}
		},
		components: {
			XHeader,
			Flow,
			FlowState,
			FlowLine
		},
		mounted() {

			this.getOrderInfo();
		},
		methods: {
			getOrderInfo: function() {
				let order_sn = this.$route.params.order_sn;
				this.$http({
					method: 'GET',
					url: '/los/api/member/goods_order_info.json?order_sn=' + order_sn,
					data: ''
				}).then((result) => {
					this.goodsOrder = result.data.goods_order
					if(result.data.auction_order) {
						this.auctionOrder = result.data.auction_order;
					} else if(result.data.seckill_order) {
						this.auctionOrder = result.data.seckill_order;
					}
					this.getDeliveryCode();
				}).catch((err) => {

				})
			},
			getDeliveryCode: function() {
				this.$http({
					method: 'GET',
					//51119662106831 this.goodsOrder.express_number 3859000136883
					url: '/los/api/test/kd100/?delivery_code=' + this.goodsOrder.express_number
				}).then((result) => {
					if(result.data.data.express_info.status == '200') {
						this.deliveryInfo = result.data.data.express_info;
						switch(this.deliveryInfo.state) {
							case '1':
								this.isDone1 = true;
								break;
							case '0':
								this.isDone1 = true;
								this.isDone2 = true;
								break;
							case '5':
								this.isDone1 = true;
								this.isDone2 = true;
								this.isDone3 = true;
								break;
							case '3':
								this.isDone1 = true;
								this.isDone2 = true;
								this.isDone3 = true;
								this.isDone4 = true;
								break;
							default:
								this.deliveryInfo.data = '数据不存在'
						}
					} else {

					}

				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.title-bar {
		width: 100%;
		height: 2.64rem;
		padding: 0.4rem 0.26rem;
		overflow: hidden;
		background: #fff;
		position: relative;
	}
	
	.title-bar:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.title-bar img {
		float: left;
		width: 1.84rem;
		height: 1.84rem;
		border-radius: 0.1rem;
	}
	
	.title-bar .desc {
		float: left;
		margin-left: 0.26rem;
		width: 4.93rem;
		overflow: hidden;
		padding: 0.1rem 0;
	}
	
	.title-bar .desc h2 {
		font-size: 0.4rem;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.title-bar .desc b {
		margin-top: 0.26rem;
		font-size: 0.34rem;
		color: #333;
		display: block;
		font-weight: normal;
	}
	
	.title-bar .desc p {
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.title-bar .contact {
		float: right;
		border: solid 1px #cccccc;
		border-radius: 0.33rem;
		padding: 0.08rem 0.33rem;
		margin-top: 0.8rem;
	}
	
	.title-bar .contact i {
		width: 0.29rem;
		height: 0.29rem;
		background-size: 100% 100%;
		background-position: 0 0;
		display: inline-block;
	}
	
	.title-bar .contact span {
		font-size: 0.32rem;
		color: #333;
		margin-left: 0.14rem;
		display: inline-block;
	}
	
	.progress {
		margin-top: 0.26rem;
		background: #fff;
		height: 2.5rem;
	}
	
	.logistics {
		background: #fff;
	}
	
	.logistics .top {
		height: 1.44rem;
		padding: 0.53rem 0.26rem;
		margin-top: 0.26rem;
		width: 100%;
	}
	
	.logistics .top img {
		float: left;
		width: 0.45rem;
		height: 0.45rem;
	}
	
	.logistics .top p {
		float: left;
		margin-left: 0.17rem;
		color: #171314;
		font-size: 0.37rem;
	}
	
	.track-list {
		padding: 0.4rem;
		position: relative;
	}
	
	.track-list:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		width: 94%;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.track-list li {
		position: relative;
		padding: 0.34rem;
		line-height: 0.24rem;
		border-left: 1px solid #d9d9d9;
		color: #999;
	}
	
	.track-list li img {
		position: absolute;
		z-index: 999;
		left: -0.26rem;
		top: 30%;
		width: 0.53rem;
		height: 0.53rem;
	}
	
	.track-list li p {
		float: left;
		width: 90%;
		margin-left: 0.26rem;
		font-size: 0.37rem;
		color: #333;
		line-height: 0.56rem;
	}
	
	.track-list li span {
		display: inline-block;
		margin-left: 0.26rem;
		font-size: 0.34rem;
		color: #777;
		width: 100%;
		height: 0.53rem;
		line-height: 0.53rem;
	}
</style>